import { computed, onMounted, onUnmounted, reactive, Ref, ref, watch } from 'vue'
import { Widget } from '@/models'
import { awaitTimeout } from '@/utils'

/** 控件激活 */
export default function useWidgetActive(widgets: Ref<Widget[]>) {
  /** 当前激活的控件 id */
  const activeWidgetId = ref('')

  /** 当前激活的控件 */
  const activeWidget = computed({
    get: () => widgets.value.find(item => item.id === activeWidgetId.value),
    set: (widget: Widget | undefined) => (activeWidgetId.value = widget?.id || '')
  })

  /** 控件激活 */
  function widgetActive(e: MouseEvent) {
    // Ctrl/Cmd 点击不激活
    if (e.ctrlKey || e.metaKey) return

    let current = e.target as HTMLElement | null
    let id = ''

    if (!widgets.value.length) return

    while (current) {
      if (current?.className?.includes?.('fa-widget')) {
        id = current.getAttribute('widget-id') || ''

        if (id) {
          activeWidgetId.value = id
          break
        }
      }

      current = current?.parentElement
    }

    activeWidgetId.value = id
  }

  onMounted(() => document.addEventListener('click', widgetActive))

  onUnmounted(() => document.removeEventListener('click', widgetActive))

  /**
   * 刚刚激活的控件
   * 由于多选开始时需要将当前激活控件纳入多选，但是操作多选时激活控件会失活，无法获取，需要延时一段时间保留激活控件 id
   */
  const lastActiveWidget: Ref<null | Widget> = ref(null)

  /** 监听激活控件 id，记录 lastActiveWidgetId 信息*/
  watch(activeWidget, async (current, last) => {
    // 记录新激活的控件
    if (current) {
      lastActiveWidget.value = current
      return
    }

    // 失活的控件，延时清除当前激活
    await awaitTimeout(300)

    // 如果记录的上次激活控件与当前失活控件一致，则清除数据
    if (lastActiveWidget.value === last) {
      lastActiveWidget.value = null
    }
  })

  return reactive({
    /** 当前激活的控件 id */
    activeWidgetId,

    /** 当前激活的控件 */
    activeWidget,

    /**
     * 刚刚激活的控件
     * 由于多选开始时需要将当前激活控件纳入多选，但是操作多选时激活控件会失活，无法获取，需要延时一段时间保留激活控件 id
     */
    lastActiveWidget
  }) as unknown as {
    /** 当前激活的控件 id */
    activeWidgetId: string

    /** 当前激活的控件 */
    activeWidget?: Widget

    /**
     * 刚刚激活的控件
     * @description 由于多选开始时需要将当前激活控件纳入多选，但是操作多选时激活控件会失活，无法获取，需要延时一段时间保留激活控件 id
     */
    lastActiveWidget: Widget | null
  }
}
